<template>
  <e-charts
    v-if="!isEmpty"
    id="count-echarts"
    theme="ovilia-green"
    :options="echartsOptions"
    ref="myecharts"
  ></e-charts>
  <div v-else class="empty">暂无数据</div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/line'
export default {
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      isEmpty: false,
      echartsOptions: {
        color: ['#ed3f35', '#2bcd8e'],
        legend: {
          top: 0,
          textStyle: {
            color: '#4c9bfd' // 图例文字颜色

          },
          data: ['新增用户', '成交用户']
        },
        grid: {
          top: '16%',
          left: '3%',
          right: '0%',
          bottom: '0%',
          containLabel: true,
          show: true,
          borderColor: '#012f4a'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#4c9bfd'
            },
            axisLine: {
              show: false
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#4c9bfd'
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [{
          name: '新增用户',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series'
          },
          data: []
        }, {
          name: '成交用户',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series'
          },
          data: []
        }]
      }
    }
  },
  components: {
    ECharts
  },
  created () {
    if (this.datas.length) {
      this.handleDatas(this.datas)
    }
  },
  mounted () {
    window.addEventListener('resize', this.loadEcharts)
  },
  methods: {
    handleDatas (data) {
      this.echartsOptions.series[0].data = data.map(item => {
        return item.new_user_count || 0
      })
      this.echartsOptions.series[0].data = data.map(item => {
        return item.order_user_count || 0
      })
      this.echartsOptions.xAxis[0].data = data.map(item => {
        return item.time_text
      })
    },
    loadEcharts () {
      if (this.$refs['myecharts']) {
        setTimeout(() => {
          this.$refs['myecharts'].resize()
        }, 10)
      }
    }
  },
  watch: {
    datas (val) {
      if (!val.length) {
        this.isEmpty = true
      } else {
        this.isEmpty = false
        this.handleDatas(val)
      }
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.loadEcharts)
  }
}
</script>

<style lang="scss" scoped>
#count-echarts {
  width: 100%;
  height: 100%;
}
.empty {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #09f;
}
</style>
